<template>
  <div>
    <!-- 头图 -->
    <TopTheme 
    height="380px"
    bg="toppic01.jpg"
    title="供应商合作"
    des1="橙券诚邀您的加入，更高效的合作方式，更尖端的技术接入"
      des2="我们期待与您携手前行共创未来"></TopTheme>

      <!-- 入住流程 -->
      <div class="entry-process">
        <h3 class="text-center">入驻流程</h3>
            <ul class="flex flex-center">
                <li>
                    <div class="process-icon">
                        <img :src="$utils.getImg(`flow1.ong`)" width="130" height="130" alt="flow1">
                     </div>
                    <h4>填写信息</h4>
                </li>
                <li>
          <div class="process-item">
            <div class="process-icon">
              <img :src="$utils.getImg(`flow2.png`)" width="130" height="130" alt="flow1" />
            </div>
            <h4>商务联系</h4>
          </div>
        </li>
        <li>
          <div class="process-item">
            <div class="process-icon">
              <img :src="$utils.getImg(`flow3.png`)" width="130" height="130" alt="flow1" />
            </div>
            <h4>洽谈资源</h4>
          </div>
        </li>
        <li>
          <div class="process-item">
            <div class="process-icon">
              <img :src="$utils.getImg(`flow4.png`)" width="130" height="130" alt="flow1" />
            </div>
            <h4>签约合作</h4>
          </div>
        </li>
            </ul>
        <!-- 申请表单 -->
        <apply-from></apply-from>
      </div>
  </div>
</template>

<script>
import ApplyForm from './components/apply-form'
export default {
  name: 'ApplyPage',
  components: { ApplyForm }
}
</script>

<style lang="scss" scoped>
.entry-process {
    padding: 70px 0 100px;
    h3 {
        font-size: 30px;
        line-height: 60px;
    }
    ul {
        li:not(:last-child) {
            display: flex;
            &::after {
                display: block;
                height: 130px;
                width: 52px;
                margin: 0 40px;
                content: '';
                background: url('@/assets/img/flow-r.png') no-repeat center/52px 24px;
            }
        }
    }
    .process-item {
        text-align: center;
        h4 {
            margin-top: 30px;
            font-size: 20px;
        }
    }
}
</style>
